<template>
  <div
    class="image-block"
    :style="{
      height: compData.style.height + 'px',
      'border-top-left-radius': compData.data.borderRadiusTop + 'px',
      'border-top-right-radius': compData.data.borderRadiusTop + 'px',
      'border-bottom-left-radius': compData.data.borderRadiusBottom + 'px',
      'border-bottom-right-radius': compData.data.borderRadiusBottom + 'px',
    }"
  >
    <sa-image :url="compData.data.src" fit="fill" radius="0" :suffix="null"></sa-image>
    <div class="card-box" v-if="compData.data.show==1">
      <div class="item">
        <div class="amount">0</div>
        <div class="label">鲸囍通宝</div>
      </div>
      <div class="item sa-m-l-20">
        <div class="amount">0</div>
        <div class="label">囍币</div>
      </div>
      <div class="sign-card">
        <view class="btn">点击签到</view>
        <img :src="baseIMG+'/static/user/sign.png'" class="sign-img"/>
      </div>
      <div class="line"></div>
    </div>
  </div>
</template>

<script setup>

 const baseIMG=import.meta.env.SHEEP_IMG_URL
 console.log('baseIMG:',baseIMG);
  const props = defineProps(['compData']);
</script>

<style lang="scss" scoped>
  .image-block {
    overflow: hidden;
    .sa-image {
      height: 100%;
    }
  }
  .card-box{
    background-color: #fff;
    width: calc(100% - 40px);
    height:64px;
    margin-left: 19px;
    margin-right: 21px;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position:relative;
    padding-bottom: 10px;
    .item{
      display:flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width:80px;
      .amount{
					height: 43px;
					font-family: Source Han Sans;
					font-size: 30px;
					font-weight: bold;
					line-height: 43px;
					letter-spacing: normal;
					color: #313131;
				}
				.label{
					height: 20px;
					font-family: Source Han Sans;
					font-size: 14px;
					font-weight: 500;
					line-height: 20px;
					text-align: center;
					letter-spacing: normal;
					color: #313131;
					
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: flex-end;
				}
    }
    .sign-card{
     
      .btn{
					width: 80px;
					height: 28px;
					border-radius: 10px;
					background: #2B6EDE;
					font-family: Source Han Sans;
					font-size: 16px;
			
					line-height: normal;
					letter-spacing: normal;
					color: #FFFFFF;
					
					margin-top:8px;
					margin-right:5px;;
					
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
				}
				.sign-img{
					position:absolute;
					right:-10px;
					top:2px;
					width: 84px;
					height: 37px;
				}
    }
    .line{
			position:absolute;
			left:85px;
			width: 50px;
			height: 0px;
			transform: rotate(90deg);
			border-top: 2px solid rgba(43, 110, 222, 0.8);
		}
  }
</style>
